<!DOCTYPE HTML>
<html>
  <head>
    <link href="/assets/css/bootstrap-combined.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" media="screen"
     href="/assets/css/bootstrap-datetimepicker.min.css">
    <link href="/assets/css/bootstrap.min.css" rel="stylesheet">
	<link href="/assets/css/datepicker3.css" rel="stylesheet">
	<link href="/assets/css/styles.css" rel="stylesheet">
	<title>Sick Leave Detail</title>
  </head>
  <body>

  <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
		<div class="container-fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#sidebar-collapse">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="/"><span>Motion</span>Global</a>
				<ul class="user-menu">
					<li class="dropdown pull-right">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span><span class="caret"></span></a>
						<ul class="dropdown-menu" role="menu">
							<li><a href="/user/profile"><span class="glyphicon glyphicon-user"></span> Profile</a></li>
							<li><a href="#"><span class="glyphicon glyphicon-cog"></span> Settings</a></li>
							<li><a href="#"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>
						</ul>
					</li>
				</ul>
			</div>
							
		</div><!-- /.container-fluid -->
	</nav>
	<?php $this->load->view("/widgets/left_nav");?>
		
	<div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">			
		<div class="row">
			<ol class="breadcrumb">
				<li><a href="#"><span class="glyphicon glyphicon-home"></span></a></li>
				<li class="">Sick Leave Detail</li>
			</ol>
		</div><!--/.row-->
		
		<div class="row">
			<div class="col-lg-12">
				<h1 class="page-header">Basic Information  <button type="button" class="btn btn-danger btn-lg" onclick="pend()">Pend it</button></h1>

			</div>
		</div><!--/.row-->
				
		
		<div class="row">
			<div class="col-lg-12">
				<div class="panel panel-default">
					<div class="panel-heading"></div>
					<div class="panel-body">
						<div class="col-md-6">
							<form role="form">									
								<div class="panel panel-default">
								  <div class="panel-heading">Start Time</div>
								  <div class="panel-body" id="title_panel">
								    
								    <div id="datetimepicker_date_start" class="input-append">
									    <input data-format="yyyy-MM-dd" type="text" id="start_date" value="<?php echo date("Y-m-d",strtotime($content['start_time']));?>"></input>
									    <span class="add-on"  style="padding: 1px 20px">
									      <i data-time-icon="icon-date" data-date-icon="icon-calendar">
									      </i>
									    </span>
									  </div>
									  <div id="datetimepicker_time_start" class="input-append">
									    <input data-format="hh:mm:ss" type="text" id="start_time"  value="<?php echo date("H:i:s",strtotime($content['start_time']));?>"></input>
									    <span class="add-on"  style="padding: 1px 20px">
									      <i data-time-icon="icon-time" data-date-icon="icon-calendar">
									      </i>
									    </span>
									  </div>
									
								  </div>
								</div>

								<div class="panel panel-default">
								  <div class="panel-heading">End Time</div>
								  <div class="panel-body" id="title_panel">
								    
								    <div id="datetimepicker_date_end" class="input-append">
									    <input data-format="yyyy-MM-dd" type="text" id="end_date" value="<?php echo date("Y-m-d",strtotime($content['end_time']));?>"></input>
									    <span class="add-on" style="padding: 1px 20px">
									      <i data-time-icon="icon-date" data-date-icon="icon-calendar">
									      </i>
									    </span>
									  </div>
									  <div id="datetimepicker_time_end" class="input-append">
									    <input data-format="hh:mm:ss" type="text" id="end_time"  value="<?php echo date("H:i:s",strtotime($content['end_time']));?>"></input>
									    <span class="add-on" style="padding: 1px 20px">
									      <i data-time-icon="icon-time" data-date-icon="icon-calendar">
									      </i>
									    </span>
									  </div>
									
								  </div>
								</div>
								

								<div class="panel panel-default">
								  <div class="panel-heading">Time Length</div>
								  <input class = "form-control" id="time_length" value="<?php echo $content['time_length'];?>"/>
								</div>

								<div class="panel panel-default">
								  <div class="panel-heading">Reason</div>
								  <textarea class="form-group" style="width: 100%" id="reason"><?php echo $content['reason'];?></textarea> 
								</div>
								
								<button type="button" class="btn btn-primary btn-lg" onclick="edit()">Save</button>
								
								</div>
		
						</form>
					</div>
				</div>
			</div><!-- /.col-->
		</div><!-- /.row -->
		
	</div><!--/.main-->
    

    <script type="text/javascript"
     src="/assets/js/bootstrap.min.js">
    </script>
    <script type="text/javascript"
     src="/assets/js/bootstrap-datetimepicker.min.js">
    </script>
    
    
    <script type="text/javascript">
      $('#datetimepicker_time_start').datetimepicker({
        pickDate :false
      });

      $('#datetimepicker_date_start').datetimepicker({
        pickTime :false
      });

      $('#datetimepicker_time_end').datetimepicker({
        pickDate :false
      });

      $('#datetimepicker_date_end').datetimepicker({
        pickTime :false
      });


      !function ($) {
			$(document).on("click","ul.nav li.parent > a > span.icon", function(){		  
				$(this).find('em:first').toggleClass("glyphicon-minus");	  
			}); 
			$(".sidebar span.icon").find('em:first').addClass("glyphicon-plus");
		}(window.jQuery);

		$(window).on('resize', function () {
		  if ($(window).width() > 768) $('#sidebar-collapse').collapse('show')
		})
		$(window).on('resize', function () {
		  if ($(window).width() <= 767) $('#sidebar-collapse').collapse('hide')
		})


		function edit()
		{
			$.post("/leave/detail/edit",
			{

				start_time : $("#start_date").val()+" "+$("#start_time").val(),
				end_time : $("#end_date").val()+" "+$("#end_time").val(),
				time_length: $("#time_length").val(),
				reason : $("#reason").val(),
				leave_type : "sick_leave",
				id : <?php echo $id; ?>
			},
			function(data,status)
			{
				json1 = eval("("+data+")");
				if(json1.code == "200")
				{
					confirm("You've edited this leave request successfully~");
					location.href = "/sick_leave";
				}
				else
				{
					alert(json1.text);
				}
			});
		}

		function pend()
		{
			$.post("/leave/detail/pend",
			{

				start_time : $("#start_date").val()+" "+$("#start_time").val(),
				end_time : $("#end_date").val()+" "+$("#end_time").val(),
				time_length: $("#time_length").val(),
				reason : $("#reason").val(),
				leave_type : "leave",
				id : <?php echo $id; ?>
			},
			function(data,status)
			{
				json1 = eval("("+data+")");
				if(json1.code == "200")
				{
					confirm("You've edited this leave request successfully~");
					location.href = "/sick_leave";
				}
				else
				{
					alert(json1.text);
				}
			});
		}
    </script>
  </body>
</html>




